<template>
	<view>
		<cu-custom title="课程详情"></cu-custom>

		<u--image :showLoading="true" radius="0" src="/static/img/1.png" width="750rpx" height="420rpx">
		</u--image>

		<view class="padding bg-white">
			<view class="text-lg text-bold">
				钢琴大师在线教导训练营
			</view>
			<view class="text-red text-lg text-bold margin-top-sm">
				￥150
			</view>

			<view class="flex text-center text-gray margin-top">
				<view class="flex-sub">
					课程科目
				</view>
				<view class="flex-sub">
					适合基础
				</view>
				<view class="flex-sub">
					上课人数
				</view>
			</view>
			<view class="flex text-center text-bold margin-top-sm">
				<view class="flex-sub">
					钢琴
				</view>
				<view class="flex-sub">
					初级、零基础
				</view>
				<view class="flex-sub">
					1对1
				</view>
			</view>
		</view>

		<!-- 班级信息 -->
		<view class="margin-top padding bg-white">
			<view class="text-lg text-bold">
				班级信息（1）
			</view>
			<view class="solid margin-top">
				<view class="flex flex-between padding-tb-sm padding-lr" style="background-color: #fdeaee;">
					<view class="">
						一年班
					</view>
					<view class="">
						10课时
					</view>
				</view>
				<view class="flex flex-between padding-tb-sm padding-lr">
					<view class="">
						<view>班级详情</view>
						<view class="text-gray">一年钢琴一对一定金</view>
					</view>
					<view class="">
						10课时
					</view>
				</view>
				<view class="flex flex-between padding-tb-sm padding-lr">
					<view class="">
						<view>门市价</view>
					</view>
					<view class="">
						￥2000
					</view>
				</view>
				<view class="flex flex-between padding-tb-sm padding-lr">
					<view class="">
						<view>上课时间</view>
						<view class="text-gray">随到随学</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 商家信息 -->
		<view class="margin-top padding bg-white">
			<view class="text-lg text-bold">
				商家信息
			</view>
			<view class="flex flex-between text-lg text-bold margin-top-sm">
				<text>Qystory音乐生活馆(会展航洋店)</text>
				<u-icon name="phone-fill" size="50rpx" color="#333"></u-icon>
			</view>
			<view class="flex align-center margin-top-sm">
				<u-icon name="map" size="36rpx" color="#333"></u-icon>
				<text class="text-gray margin-left-xs">2.2KM</text>
			</view>

			<view class="flex flex-between margin-top-sm">
				<text>查看全部2家使用门店</text>
				<u-icon name="arrow-right" size="30rpx"></u-icon>
			</view>
		</view>

		<view class="margin-top bg-white">
			<u-tabs @click="curriculumTypeTab" :list="curriculumTypeList" :scrollable="false" lineWidth="20"
				lineHeight="7" :lineColor="`url(/static/images/ico/active-bg.png) 100% 100%`" :activeStyle="{
			        color: '#ea3457',
			        fontWeight: 'bold',
			        transform: 'scale(1.05)'
			    }" :inactiveStyle="{
			        color: '#333',
			        transform: 'scale(1)'
			    }" itemStyle="padding-right: 30rpx; height: 100rpx;">
			</u-tabs>

			<!-- 课程详情 -->
			<view class="" v-if="curriculumIndex == 0">
				<view class="padding-bottom solid-bottom margin-top">
					<view class="solid-left-lg padding-left-sm text-bold text-lg margin-left-sm">
						适用对象
					</view>
					<view class="margin-top-sm padding-lr-xl">
						不用有钢琴基只要喜欢铜琴的朋友
					</view>
				</view>

				<view class="padding-bottom solid-bottom margin-top">
					<view class="solid-left-lg padding-left-sm text-bold text-lg margin-left-sm">
						学习目标
					</view>
					<view class="margin-top-sm padding-lr-xl">
						1达到古典钢琴五级左右水平2颁发水平认可证书3基础即兴伴委弹水平
					</view>
				</view>

				<view class="padding-bottom solid-bottom margin-top">
					<view class="solid-left-lg padding-left-sm text-bold text-lg margin-left-sm">
						授课老师
					</view>
					<view class="flex flex-between padding-lr margin-top-lg" v-for="(item,index) in 4">
						<view class="flex align-center">
							<view style="flex: 0 0 115rpx">
								<u-avatar size="115rpx" :src="`https://cdn.uviewui.com/uview/album/${index + 1}.jpg`">
								</u-avatar>
							</view>
							<view class="margin-left">
								<view class="text-lg text-bold">
									史密斯
								</view>
								<view class="text-gray margin-top-xs">
									成人钢琴
								</view>
								<view class="margin-top-xs">
									广西艺术学院钢号演要本料
								</view>
							</view>
						</view>
						<view class="flex align-center">
							<u-icon name="heart-fill" size="40rpx" color="#999"></u-icon>
							<text class="text-gray text-lg margin-left-xs">2</text>
						</view>
					</view>

					<view class="flex justify-center margin-top-xl">
						<text class="text-lg">收起</text>
						<u-icon name="arrow-up" size="30rpx" color="#999"></u-icon>
					</view>
				</view>

				<!-- 课程详情 -->
				<view class="padding-bottom margin-top">
					<view class="solid-left-lg padding-left-sm text-bold text-lg margin-left-sm">
						课程详情
					</view>
					<view class="padding">
						1达到古典钢琴五级左右水平2颁发水平认可证书3基础兴伴委弹唱水平4。独创成人钢琴教学法
					</view>
				</view>
			</view>


			<!-- 购买说明 -->
			<view class="padding text-bold" v-if="curriculumIndex == 1">
				<view class="text-lg text-bold">
					购买说明
				</view>

				<view class="flex align-center margin-top">
					<view class="text-gray" style="flex: 0 0 150rpx">
						有效期
					</view>
					<view class="flex-sub text-red">
						2020.10.25至2020.11.25
					</view>
				</view>

				<view class="flex align-center margin-top">
					<view class="text-gray" style="flex: 0 0 150rpx">
						预约信息
					</view>
					<view class="flex-sub">
						需提前1天预约
					</view>
				</view>

				<view class="flex align-center margin-top">
					<view class="text-gray" style="flex: 0 0 150rpx">
						其他说明
					</view>
					<view class="flex-sub">
						此价格为课程定金
					</view>
				</view>
			</view>

			<!-- 网友评价 -->
			<view class="padding padding-bottom" v-if="curriculumIndex == 2">
				<view class="text-lg text-bold" @tap="$routerGo('/pages/mechanism/comment-list')">
					用户评论（13545）
				</view>
				<comment />
			</view>
		</view>

		<!-- 更多课程 -->
		<view class="margin-top padding bg-white">
			<view class="text-lg text-bold">
				本店更多乐器培训课程（5）
			</view>

			<view class="margin-top-lg padding-lr-xs" v-for="(item,index) in 3" :key="index">
				<view class="flex align-center">
					<u--image :showLoading="true" radius="10rpx"
						:src="`https://cdn.uviewui.com/uview/album/${index + 5}.jpg`" width="160rpx" height="160rpx">
					</u--image>
					<view class="flex-sub margin-left-sm">
						<view class="text-cut text-lg text-bold" style="flex: 0 0 425rpx; width: 425rpx;">
							成人钢琴高级班
						</view>

						<view class="margin-top-xs text-lg text-bold text-red">
							￥200
						</view>

						<view class="margin-top-sm text-gray">
							钢琴 | 正式课 | 一对一
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 更多商家 -->
		<view class="margin-top padding bg-white">
			<view class="text-lg text-bold">
				更多商家
			</view>

			<view @tap="$routerGo('/pages/mechanism/index')" class="margin-top-lg padding-lr-xs"
				v-for="(item,index) in 3" :key="index">
				<view class="flex align-center">
					<u--image :showLoading="true" radius="10rpx"
						:src="`https://cdn.uviewui.com/uview/album/${index + 1}.jpg`" width="160rpx" height="160rpx">
					</u--image>
					<view class="flex-sub margin-left-sm">
						<view class="flex">
							<view class="text-cut text-lg text-bold" style="flex: 0 0 425rpx; width: 425rpx;">
								凡尔赛钢琴大师</view>
							<view class="margin-left">
								<u-icon name="more-dot-fill" color="#999999"></u-icon>
							</view>
						</view>

						<view class="margin-top-xs flex align-center">
							<view class="text-red padding-right">评价：5.0</view>
							<view class="padding-left solid-left">
								销量：150
							</view>
						</view>

						<view class="flex flex-between margin-top-sm">
							<view class="flex align-center">
								<u-icon name="map-fill" size="36rpx" color="#999999"></u-icon>
								<view class="margin-left-xs text-cut" style="flex: 0 0 270rpx; width: 270rpx;">
									青秀区秦汉胡同国学书院3栋108室
								</view>
							</view>
							<text class="margin-left-sm">
								42.2KM
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<u-gap height="160rpx" bgColor="#f4f4f4"></u-gap>
		
		<view class="flex flex-between btn-bottom padding-lr padding-tb-sm bg-white">
			<view class="text-center" style="flex: 0 0 160rpx;">
				<view class="flex justify-center">
					<u-icon name="phone-fill" color="#cccccc" size="60rpx"></u-icon>
				</view>
				<view class="">
					电话咨询
				</view>
			</view>
			<view class="text-center" style="flex: 0 0 160rpx;">
				<view class="flex justify-center">
					<u-icon name="chat-fill" color="#cccccc" size="60rpx"></u-icon>
				</view>
				<view class="">
					在线咨询
				</view>
			</view>
		
			<view class="flex flex-sub">
				<u-button @tap="$routerGo('/pages/mechanism/purchase')" class="margin-left" color="#ea3457" type="primary" size="large" shape="circle" text="点击购买">
				</u-button>
			</view>
		</view>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import comment from './components/comment.vue' //评论
	export default {
		components: {
			comment
		},
		data() {
			return {
				curriculumIndex: 0,
				curriculumTypeList: [{
					name: '课程详情'
				}, {
					name: '购买说明',
				}, {
					name: '网友评价',
				}],
			}
		},
		onShow() {

		},
		methods: {
			//切换Tab
			curriculumTypeTab(item) {
				this.curriculumIndex = item.index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.solid-left-lg {
		border-left: 10rpx solid #ea3457
	}
</style>
